<template>
  <div>
    <div class="group1">
      <h1>插槽列表演示</h1>
      <SonDemo17 :chide :slist="list5">
        <template #gridBoxItem="gItem">
          <div class="newlist">
            <h4>{{ gItem.title }}</h4>
            <p>{{ gItem.descript }}</p>
          </div>
        </template>
      </SonDemo17>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Study4StuDemo5'
}
</script>
<script setup lang="ts">
import { onMounted, provide, ref, type Ref } from 'vue'
import SonDemo17 from './components/SonDemo17.vue'
import { type IDemo5List } from '@/service/types/stuDemo5'

import { getList } from '@/service/study4/stuDemo5'

import { myInjectionKey } from './components/keys'

const list5 = ref<IDemo5List[]>([])

const chide = ref('蛋糕')

const heshibi = ref('爷爷的和氏璧')

// 提供者
provide<{ heshibi: Ref<string> }>(myInjectionKey, {
  heshibi
})

provide('foo', {
  name: 'wahshsh'
})

onMounted(async () => {
  list5.value = await getList()
})
</script>

<style lang="scss" scoped>
.group1 {
  border: 3px solid rgb(203, 50, 175);
  margin: 10px;
  padding: 10px;
}
</style>
